<script setup lang="ts">
import type { DeptTypeListResult } from "@/api/types";
import { ElMessage } from "element-plus";
import { deptTypeApi } from "@/api";
import IconifyIcon from "@/components/ReIcon/src/iconifyIcon";
import { $t } from "@/plugins/i18n";
import { apiCall } from "@/utils/http/apiCall";
import FormDialog from "./components/FormDialog.vue";
import { useDeptTypeFormDialog, useDeptTypeTable } from "./composables";

defineOptions({
    name: "SysDepartType",
});

const {
    tableLoading,
    tableData,
    tablePage,
    tableQuery,
    fetchTableData,
    handleTableQuery,
    resetTableQuery,
} = useDeptTypeTable();

const {
    dialogVisible,
    editData,
    openAddDialog,
    openEditDialog,
} = useDeptTypeFormDialog();

/** 删除 */
function handleDelete(row: DeptTypeListResult): void {
    apiCall(
        () => deptTypeApi.remove(row.id),
        (data, resp) => {
            ElMessage.success($t(resp.message));
            fetchTableData();
        },
    );
}
</script>

<template>
    <el-card>
        <!-- Note[html] 当 <form> 表单中只有一个输入框时，在输入框中按下回车键会默认触发表单提交，从而导致页面刷新。 -->
        <el-form :inline="true" @submit.prevent>
            <el-form-item :label="$t('label.name')">
                <el-input
                    v-model.trim="tableQuery.name"
                    clearable
                    class="w-60!"
                    :placeholder="$t('placeholder.inputName')"
                    @keyup.enter="handleTableQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleTableQuery">
                    {{ $t("button.search") }}
                </el-button>
                <el-button @click="resetTableQuery">
                    {{ $t("button.reset") }}
                </el-button>
                <el-button type="primary" @click="openAddDialog">
                    {{ $t("button.add") }}
                </el-button>
            </el-form-item>
        </el-form>
        <el-page-table
            :loading="tableLoading"
            :data="tableData"
            :page="tablePage"
            :fetch-data="fetchTableData"
        >
            <el-table-column prop="name" :label="$t('label.name')" />
            <el-table-column prop="icon" :label="$t('label.icon')">
                <template #default="{ row: { icon } }">
                    <IconifyIcon v-if="icon" :icon="icon" />
                    <span v-else>/</span>
                </template>
            </el-table-column>
            <el-table-column prop="cascadeLevel" :label="$t('label.cascadeLevel')">
                <template #default="{ row: { cascadeLevel } }">
                    <span v-if="cascadeLevel.length">{{ cascadeLevel.join(" / ") }}</span>
                    <span v-else>/</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('label.operation')" width="160">
                <template #default="{ row }: { row: DeptTypeListResult }">
                    <el-button type="primary" link @click="openEditDialog(row.id)">
                        {{ $t("button.edit") }}
                    </el-button>
                    <el-delete-button is-box @confirm="handleDelete(row)" />
                </template>
            </el-table-column>
        </el-page-table>

        <!-- 新增/编辑对话框 -->
        <FormDialog
            v-model:visible="dialogVisible"
            :edit-data="editData"
            @success="fetchTableData"
        />
    </el-card>
</template>
